<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <!--头部商品列表div-->
          <div class="mt-3">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品属性</p>
          </div>
          <!--主体内容-->
          <div class="col-12">

            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary  mt-3"  data-toggle="modal" data-target="#attribute_add">
              <span>&emsp;新增属性&emsp;</span>
            </button>
            <!-- Modal -->
            <div class="modal fade mt-5" id="attribute_add" tabindex="-1" aria-labelledby="attribute_add_label" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h6 class="modal-title" id="attribute_add_label">新增属性</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body" >
                    <div class="" >
                      <div class="col-9 ml-4 mb-4 form-inline">
                        <div class="col-4" align="right">排序&emsp;</div>
                        <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                      </div>
                      <div class="col-9 ml-4 mb-4 form-inline">
                        <div class="col-4" align="right"><span>属性名称&nbsp;<span style="color: red">*</span></span></div>
                        <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                      </div>
                      <div class="col-9 ml-4 mb-4 form-inline">
                        <div class="col-4" align="right"><span>属性值&nbsp;<span style="color: red">*</span></span></div>
                        <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="col-12 mt-4">
            <table class="table table-striped table-hover" >
              <thead>
              <tr>
                <th>排序</th>
                <th>ID</th>
                <th>属性名称</th>
                <th>属性值</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>

              <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>3</td>

                <td>
                  <el-switch v-model="status" />
                </td>
                <td>
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#attribute_edit">
                    <span style="font-size: 13px">编辑</span>
                  </button>
                  <!-- Modal -->
                  <div class="modal fade mt-5" id="attribute_edit" tabindex="-1" aria-labelledby="attribute_edit_label" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title" id="attribute_edit_label">编辑</h6>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" >
                          <div class="" >
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right">排序&emsp;</div>
                             <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>属性名称&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>属性值&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                            </div>
                           </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary">保存</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                        </div>
                      </div>
                    </div>
                  </div>

                  <button type="button" class="btn btn-outline-danger btn-sm" ><span style="font-size: 13px">删除</span></button>
                </td>
              </tr>
              </tbody>
            </table>
            <!--分页组件-->
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsAttribute",
data(){
    return{
      status:true
    }
}
}
</script>

<style scoped>

</style>
